<template>
  <div class="dashboard-container" v-if="this.role == '用户'">
    <h1>订单</h1>
    <div>
      <el-input placeholder="订单ID" v-model="ordersId" clearable style="width: 200px;margin-left: 40px"/>
      <el-input placeholder="商品名称" v-model="commodityName" clearable style="width: 200px;margin-left: 40px"/>
      <el-button type="primary" @click="selectAll" style="width: 100px;margin-left: 40px">查询</el-button>
      <el-button @click="check" style="width: 100px;margin-left: 40px">重置</el-button>
      <el-table :data="ordersList" height="750px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="ordersId" label="订单ID" sortable/>
        <el-table-column align="center" fixed prop="commodityName" label="商品名称" sortable/>
        <el-table-column align="center" fixed label="购买数量">
          <template v-slot="scope">
            <span > <span style="color: #0049ff">{{scope.row.number}}</span>  件</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed label="单价">
          <template v-slot="scope">
            <span >￥ <span style="color: #0049ff">{{scope.row.price}}</span> 元</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed label="总价">
          <template v-slot="scope">
            <span >￥ <span style="color: #ff0000">{{scope.row.total}}</span> 元</span>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="deleteButton(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="删除" width="40%" :visible.sync="deleteButtonController">
        <h1>请确认是否删除？</h1>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteOrders">确定</el-button>
          <el-button @click="deleteButtonController = false">取消</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
  <div class="dashboard-container" v-else>
    <h1>无权限访问</h1>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { deleteOrders, queryAllOrders } from '@/api/orders'

export default {
  name: 'orders',
  computed: { ...mapGetters(['userId', 'name', 'role']) },
  // 存放页面参数
  data() {
    return {
      ordersId:'',
      commodityName: '',
      ordersList: [],
      deleteButtonController: false
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.selectAll()
  },
  // 页面的方法和事件
  methods: {
    selectAll() {
      queryAllOrders({
        commodityName: this.commodityName,
        ordersId: this.ordersId,
        userId: this.userId
      }).then(
        response => {
          this.ordersList = response.data
        }
      )
    },
    check() {
      this.commodityName = ''
      this.ordersId = ''
      this.selectAll()
    },
    deleteButton(row) {
      this.deleteButtonController = true
      this.ordersId = row.ordersId
    },
    deleteOrders(formName) {
      deleteOrders({
        ordersId: this.ordersId
      }).then(
        response => {
          this.deleteButtonController = false
          this.ordersId = ''
          this.selectAll()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
